<template>
	<view class="my">
		<view class="my-header" v-if="token">
			<image :src="userInfo.avatar_url" style="width: 120upx;height: 120upx;border: 10upx solid #000000;border-radius: 50%;"></image>
			<view style="font-size: 32upx;margin-top: 30upx;">{{userInfo.nickname}}</view>
			<view style="font-size: 24upx;margin-top: 15upx;">{{userInfo.mobile}}</view>
		</view>
		<view class="my-header" v-if="!token">
			<image src="../../static/wdl.png" style="width: 120upx;height: 120upx;border: 10upx solid #000000;border-radius: 50%;"></image>
			<view style="font-size: 32upx;margin-top: 30upx;">未登录</view>
		</view>
		<view class="my-cell">
			<u-cell-group>
				<u-cell-item icon="setting-fill" title="我的优惠券" @click="getCoupon"></u-cell-item>
				<u-cell-item icon="red-packet-fill" title="我的钱包" @click="getMoney" v-if="userInfo.aid != 0"></u-cell-item>
				<u-cell-item icon="integral-fill" title="联系我们"></u-cell-item>
			</u-cell-group>
		</view>
		<view v-if="token" class="my-btn" @click="introduction">退出登录</view>
		<view v-if="!token" class="my-btn" @click="introduction">登录</view>
	</view>
</template>

<script>
	export default {
		data () {
			return{
				userInfo: {},
				token: ''
			}
		},
		mounted() {
		},
		onShow() {
			this.token = uni.getStorageSync('token')
			this.getUserInfo()
		},
		methods: {
			getUserInfo () {
				this.$request('', '/api/app/coupon/getuserinfo', 'POST', {
					openid: uni.getStorageSync('openid')
				}, {}).then(res => {
					this.userInfo = res.data
				})
			},
			getMoney () {
				uni.navigateTo({
					url: '/pages/home/index'
				})
			},
			getCoupon () {
				uni.navigateTo({
					url: '/pages/coupon/index'
				})
			},
			introduction () {
				uni.clearStorage();
				uni.reLaunch({
				    url: '/pages/login/index'
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.my{
		width: 100%;
		height: 100vh;
		background-color: #EDEDED;
		.my-header{
			width: 100%;
			height: 478upx;
			background-image: url('');
			background-size: 100% 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding-top: 150upx;
		}
		.my-coupon{
			width: 686upx;
			height: 313upx;
			background: #FFFFFF;
			border-radius: 16upx;
			margin: 0 auto;
			margin-top: 32upx;
			.coupon-icon{
				display: flex;
				justify-content: space-around;
				margin-top: 32upx;
				text-align: center;
			}
		}
		.my-cell{
			width: 686upx;
			// height: 100px;
			background: #FFFFFF;
			border-radius: 16upx;
			margin: 0 auto;
			margin-top: 24upx;
		}
		.my-btn{
			width: 686upx;
			height: 100upx;
			background: #FFFFFF;
			border-radius: 16upx;
			margin: 0 auto;
			font-size: 28upx;
			font-family: PingFangSC-Semibold, PingFang SC;
			font-weight: 600;
			color: #F85D5D;
			line-height: 100upx;
			text-align: center;
			margin-top: 66upx;
			// padding-bottom: 50upx;
		}
	}
</style>
